<template>
  <a-card :bordered="false">
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button type="primary" @click="handleAdd" icon="plus"> 添加文章 </a-button>
      <a-button type="primary" @click="handleSortTop" icon="menu"> 热门排序 </a-button>
      <a-button type="primary" @click="handleSortHot" icon="menu"> 置顶排序 </a-button>
      <a-button type="primary" @click="handleSortSide" icon="menu"> 侧边排序 </a-button>
      <a-button type="primary" @click="handleCode" icon="edit"> 修改验证码 </a-button>
    </div>
    <!-- table区域-begin -->
    <div>
      <a-table 
        ref="table"
        size="middle"
        rowKey="id"
        :columns="tableColumns"
        :dataSource="tableData"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <div slot="memberid" slot-scope="text, record">
          <a-button @click="handleEdit(record)" type="primary">编辑</a-button>
          <a-popconfirm title="确认删除?" ok-text="确定" cancel-text="取消" @confirm="handleDelete(record.id)">
            <a-button type="danger">删除</a-button>
          </a-popconfirm>
        </div>
        <!--图片预览块-->
        <span slot="imgPath" slot-scope="text, record">
          <!-- <img :src="record.images.split(',')[0]" width="80px" height="80px" /> -->
          <div>
            <img :src="record.img" v-show="record.mode == 0" width="120px" height="80px" />
            <img :src="record.img" v-show="record.mode == 1" height="80px" />
          </div>
        </span>
      </a-table>
    </div>
    <!-- 表单区域 -->
    <blog-sort ref="modalForm" ></blog-sort>
    <blog-code ref="modalCodeForm" ></blog-code>
  </a-card>
</template>
<script>
import blogCode from "@/views/blog/modules/blogCode";
import blogSort from "@/views/blog/modules/blogSort";
import ApiTree from '@/api/blog/blogList';
import { Slime, crud } from '@/mixins/slime';
export default {
  mixins: [Slime],
  components: { blogSort, blogCode },
  data() {
    return {
      tableData: [],
      tableColumns: [
        { title: '标题', dataIndex: 'title', align: 'center',ellipsis: true, },
        {
          title: '文章图片',
          align: 'center',
          dataIndex: 'img',
          scopedSlots: { 
            customRender: 'imgPath',
          },
        },
        { 
          title: '是否下载', 
          dataIndex: 'showDownInfo', 
          align: 'center',
          customRender: function (status) {
            if(status == 0){
              return '不显示'
            }else{
              return '显示'
            }
          },
        },
        { title: '下载次数', dataIndex: 'downTimes', align: 'center' },
        { title: '浏览次数', dataIndex: 'browse', align: 'center' },
        { 
          title: '状态', 
          dataIndex: 'status', 
          align: 'center',
          customRender: function (status) {
            if(status == 0){
              return '已下架'
            }else{
              return '上架中'
            }
          },
        },
        {
          title: '操作',
          dataIndex: 'id',
          scopedSlots: { customRender: 'memberid' },
          align: 'center',
        },
      ],
    };
  },
  methods: {
    //初始化
    loadData(arg){
      this.loadDataPack(arg).then((res) => {
        let data = res.result.records;
        this.tableData = data;
      })
    },
    // 添加文章
    handleAdd() {
      this.$router.push('/addBlogDetail');
    },
    //编辑
    handleEdit(record) {
      this.$router.push('/addBlogDetail?id=' + record.id);
    },
    // 删除
    handleDelete(id){
      let ids = [];
      ids.push(id)
      var that = this;
      ApiTree.getDelete(ids)
        .then((res) => {
          if (res.success) {
            that.$message.success('删除成功');
          } else {
            that.$message.warning(res.message);
          }
        })
        .finally(() => {
          that.loadData();
        });
    },
    //排序
    handleSortTop(){
      this.$refs.modalForm.edit('top');
      this.$refs.modalForm.title = "热门排序";
    },
    //排序
    handleSortHot(){
      this.$refs.modalForm.edit('hot');
      this.$refs.modalForm.title = "置顶排序";
    },
    //排序
    handleSortSide(){
      this.$refs.modalForm.edit('side');
      this.$refs.modalForm.title = "侧边排序";
    },
    //修改验证码
    handleCode(){
      this.$refs.modalCodeForm.edit();
      this.$refs.modalCodeForm.title = "修改验证码";
    },
  },
  created() {
    crud(ApiTree)
    this.loadData();
    // getList().then((res) => {
    //   if (res.result) {
    //     this.buildUl = res.result;
    //   }
    // });
  },
};
</script>